/*
 * @Author: weidewei
 * @Date: 2025-11-24 13:49:53
 * @LastEditors: weidewei
 * @LastEditTime: 2025-11-24 14:15:10
 * @Description:
 * @FilePath: \2025-front-face\vite-react-ts-template\src\pages\react-route.tsx
 */
import styled from 'styled-components';
export default function reactRouteComp() {
  const navigate = useNavigate();  
  return (
    <Wrapper>
      <div className="reactRouteComp">
        {/* Link 组件 - 不会刷新页面 */}
        <Link to="/memo">跳转到memo</Link>
        <br />
        <NavLink to="/useState?id=111">
          跳转到useState
        </NavLink>
        <br />
        <button onClick={()=>navigate('/useRef')}>跳转到useRef</button>
        {/* <button onClick={()=>navigate('/useRef?id=111')}>跳转到useRef带参数版本</button> */}
        <button onClick={()=>navigate('/useRef?id=111',{replace: true})}>替换当前页面</button>
      </div>
    </Wrapper>
  );
}
const Wrapper = styled.div`
  .reactRouteComp {
    color: #000;
  }
`;
